<!-- 主页 -->
<template>
  <div class="dashboard-wrapper" v-if="uname" ref="dashboardRed">

    <div class="ServiceStates__modules">
      <div class="full-box">
        <empty-car/>
      </div>
    </div>

    <div class="ServiceStates__modules">
      <div class="card-box">
        <order-trend/>
      </div>
      <div class="card-box">
        <parking/>
      </div>
    </div>

    <div class="ServiceStates__modules">
      <div class="card-box">
        <business-trend/>
      </div>
      <div class="card-box">
        <salesman-bar/>
      </div>
    </div>

    <div class="ServiceStates__modules">
      <div class="card-box">
        <car-info-state/>
      </div>
      <div class="card-box">
        <vehicle/>
      </div>
    </div>

    <div class="ServiceStates__modules">
      <div ref="boxRef" class="card-box card-box-custom" style="background: transparent;padding: 0">
        <div class="card-box_inner  ">
          <balance/>
        </div>
        <div class="card-line"></div>
        <div class="card-box_inner ">
          <cast/>
        </div>
      </div>
      <div class="card-box card-box-custom" style="background: transparent;padding: 0">
        <div class="card-box_inner  ">
          <financial/>
        </div>
        <div class="card-line"></div>
        <div class="card-box_inner ">
          <profit ref="profitRef" class="card-box-position"/>
        </div>
      </div>
    </div>

    <div ref="tableBoxRef" class="ServiceStates__modules">
      <div class="box-three-wrapper" style="margin-top: 4px;margin-right:10px;background: white;overflow: auto">
        <car-info-month style="width: 100%"/>
      </div>
      <div class="box-one-wrapper">
      </div>
    </div>

  </div>
</template>

<script>
import {mapGetters} from "vuex";
import emptyCar from './empty-car'
import Parking from './Parking'
import salesmanBar from './salesmanBar'
import orderTrend from './order-trend'
import businessTrend from './business-trend'
import carInfoState from './carInfoState'
import driverInfoState from './driverInfoState'
import carInfoMonth from './carInfoMonth'
import Financial from './financial'
import balance from './balance'
import cast from './cast'
import profit from "./profit";
import vehicle from './vehicle'


export default {
  name: 'Dashboard',
  components: {
    emptyCar,
    Parking,
    salesmanBar,
    orderTrend,
    businessTrend,
    carInfoState,
    driverInfoState,
    carInfoMonth,
    Financial,
    balance,
    vehicle,
    cast,
    profit
  },
  computed: {
    ...mapGetters(["uname"]),
  },
  mounted() {
    this.$nextTick(() => {
      this.resize()
    })
    window.addEventListener('resize', this.resize, false)
  },
  destroyed() {
    window.removeEventListener('resize', this.resize, false)
  },
  methods: {
    resize() {
      let mainEl = document.querySelector('.el-main')
      if(this.$refs.dashboardRed) this.$refs.dashboardRed.style.height = mainEl.offsetHeight + 'px'
    }
  }

}
</script>

<style lang="less">
.dashboard-wrapper {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #f5f5f5;

  .ServiceStates__modules {
    display: flex;
    justify-content: space-between;
    padding: 4px 10px;

    .full-box {
      width: 100%;
      padding: 16px;
      background: white;
      border-radius: 4px;

    }

    .card-box {
      width: 49.7%;
      padding: 16px;
      background: white;
      border-radius: 4px;

      &.card-box-custom {
        display: flex;

        .card-box_inner {
          position: relative;
          flex: 1;
          background: white;
          padding: 16px;

          &.card-box_inner_flex_half {
            flex: 1.3;
          }

          .card-box-position {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: white;
            height: 1072px;
            margin-bottom: 20px;
          }
        }

        .card-line {
          width: 12px;
          height: 100%;
        }
      }
    }


    .box-three-wrapper {
      flex: 3;
      display: flex;
      padding: 16px;
      justify-content: space-between;
      margin-bottom: 10px;
      .card-box {
        width: 32.8%;
      }
    }

    .box-one-wrapper {
      flex: 1;
    }

    .half-box {
      width: 24.6%;
    }

    .marginLeftAndRight_10 {
      margin: 0 10px;
    }

    .marginLeft_5 {
      margin-left: 5px;
    }

    .marginRight_5 {
      margin-right: 5px;
    }

    .marginLeft_10 {
      margin-left: 10px;
    }

    .marginRight_10 {
      margin-right: 10px;
    }

    .ServiceStates__item {
      flex: 1;

      &.half {
        flex: 0.6
      }

      &.flex_falf {
        flex: 1.5
      }

      &.setwidth_500 {
        width: 500px;
        flex: none;

        .el-card__body {
          width: 500px;
        }
      }

      &.setwidth_200 {
        width: 360px;
        flex: none;

        .el-card__body {
          width: 400px;
        }
      }

      .tableHeader {
        border: 1px solid #ebeef5;
        font-size: 14px;
        border-bottom: none;
        padding: 8px 0;
        text-align: center;
      }

      .time-wrapper {
        text-align: right;
      }

      .table-style {
        margin: 10px 0;
      }

      .orderSearch-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
          color: #3A71A8;
          font-size: 18px;
          padding-left: 10px;
          font-weight: bold;
        }
      }


      &.margin {
        margin: 0 10px;
      }


      .echarts-wrapper {
        display: flex;
        justify-content: space-between;

        .half_Box {
          flex: 1;
          box-sizing: content-box;
          height: 300px;

          .el-card__body {
            height: 100%;
          }
        }
      }


    }
  }
}

</style>
